<!doctype html>
<html xmlns:th="http://www.thymeleaf.org">

<head>
    <title>服务器管理</title>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
    <link rel="stylesheet" th:href="@{/vendor/bootstrap/css/bootstrap.min.css}">
    <link rel="stylesheet" th:href="@{/vendor/font-awesome/css/font-awesome.min.css}">
    <link rel="stylesheet" th:href="@{/vendor/linearicons/style.css}">
    <link rel="stylesheet" th:href="@{/vendor/chartist/css/chartist-custom.css}">
    <link rel="stylesheet" th:href="@{/css/main.css}">
    <link rel="stylesheet" th:href="@{/css/demo.css}">
    <link href="https://fonts.googleapis.com/css?family=Source+Sans+Pro:300,400,600,700" rel="stylesheet">
    <link rel="apple-touch-icon" sizes="76x76" th:href="@{/img/apple-icon.png}">
    <link rel="icon" type="image/png" sizes="96x96" th:href="@{/img/favicon.png}">
    <script th:src="@{/vendor/jquery/jquery.min.js}"></script>
    <script th:src="@{/vendor/bootstrap/js/bootstrap.min.js}"></script>
    <script th:src="@{/vendor/jquery-slimscroll/jquery.slimscroll.min.js}"></script>
    <script th:src="@{/vendor/jquery.easy-pie-chart/jquery.easypiechart.min.js}"></script>
    <script th:src="@{/vendor/chartist/js/chartist.min.js}"></script>
    <script th:src="@{/scripts/klorofil-common.js}"></script>
</head>
<body>
<div id="wrapper">
    <!-- NAVBAR -->

    <nav class="navbar navbar-default navbar-fixed-top">
        <div class="brand">
            <a href="index.html"><img th:src="@{/img/logo-dark.png}" alt="Klorofil Logo"
                                      class="img-responsive logo"></a>
        </div>
        <div class="container-fluid">
            <div class="navbar-btn">
                <button type="button" class="btn-toggle-fullwidth"><i class="lnr lnr-arrow-left-circle"></i></button>
            </div>
            <form class="navbar-form navbar-left">
                <div class="input-group">
                    <input type="text" value="" class="form-control" placeholder="Search dashboard...">
                    <span class="input-group-btn"><button type="button" class="btn btn-primary">Go</button></span>
                </div>
            </form>
            <div class="navbar-btn navbar-btn-right">
                <a class="btn btn-success update-pro"
                   href="#downloads/klorofil-pro-bootstrap-admin-dashboard-template/?utm_source=klorofil&utm_medium=template&utm_campaign=KlorofilPro"
                   title="Upgrade to Pro" target="_blank"><i class="fa fa-rocket"></i> <span>UPGRADE TO PRO</span></a>
            </div>
            <div id="navbar-menu">
                <ul class="nav navbar-nav navbar-right">
                    <li class="dropdown">
                        <a href="#" class="dropdown-toggle icon-menu" data-toggle="dropdown">
                            <i class="lnr lnr-alarm"></i>
                            <span class="badge bg-danger">5</span>
                        </a>
                        <ul class="dropdown-menu notifications">
                            <li><a href="#" class="notification-item"><span class="dot bg-warning"></span>System space
                                is almost full</a></li>
                            <li><a href="#" class="notification-item"><span class="dot bg-danger"></span>You have 9
                                unfinished tasks</a></li>
                            <li><a href="#" class="notification-item"><span class="dot bg-success"></span>Monthly report
                                is available</a></li>
                            <li><a href="#" class="notification-item"><span class="dot bg-warning"></span>Weekly meeting
                                in 1 hour</a></li>
                            <li><a href="#" class="notification-item"><span class="dot bg-success"></span>Your request
                                has been approved</a></li>
                            <li><a href="#" class="more">See all notifications</a></li>
                        </ul>
                    </li>
                    <li class="dropdown">
                        <a href="#" class="dropdown-toggle" data-toggle="dropdown"><img th:src="@{/img/user.png}"
                                                                                        class="img-circle" alt="Avatar">
                            <span>管理员</span> <i class="icon-submenu lnr lnr-chevron-down"></i></a>
                        <ul class="dropdown-menu">
                            <li><a href="#"><i class="lnr lnr-user"></i> <span>我的主页</span></a></li>
                            <li><a href="#"><i class="lnr lnr-envelope"></i> <span>消息</span></a></li>
                            <li><a href="#"><i class="lnr lnr-cog"></i> <span>设置</span></a></li>
                            <li><a href="/view/login"><i class="lnr lnr-exit"></i> <span>退出</span></a></li>
                        </ul>
                    </li>

                </ul>
            </div>
        </div>
    </nav>
    <!-- END NAVBAR -->
    <!-- LEFT SIDEBAR -->
    <div id="sidebar-nav" class="sidebar">
        <div class="sidebar-scroll">
            <nav>
                <ul class="nav">
                    <li><a href="/view/index" class=""><i class="lnr lnr-home"></i> <span>仪表盘</span></a></li>
                    <li><a href="/view/cronList" class=""><i class="lnr lnr-code"></i> <span>定时任务管理</span></a>
                    </li>
                    <li><a href="/view/serviceList" class="active"><i class="lnr lnr-chart-bars"></i> <span>服务器管理</span></a>
                    </li>
                </ul>
            </nav>
        </div>
    </div>
    <!-- 新增模态框 -->
    <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                    <h4 class="modal-title" id="myModalLabel">新增服务器</h4>
                </div>
                <div class="modal-body">
                    <form class="form-horizontal" role="form">
                        <div class="form-group">
                            <label for="serviceName" class="col-sm-2 control-label">服务器名称</label>
                            <div class="col-sm-10">
                                <input type="text" class="form-control" id="serviceName" placeholder="请输入服务器名称">
                            </div>
                        </div>
                        <div class="form-group">
                            <label for="serviceIp" class="col-sm-2 control-label">服务器ip地址（携带http/https）</label>
                            <div class="col-sm-10">
                                <input type="text" class="form-control" id="serviceIp" placeholder="请输入服务器ip地址">
                            </div>
                        </div>

                        <div class="form-group">
                            <label for="servicePort" class="col-sm-2 control-label">端口号</label>
                            <div class="col-sm-10">
                                <input type="text" class="form-control" id="servicePort" placeholder="请输入端口号">
                            </div>
                        </div>
                    </form>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                    <button type="button" id="add" class="btn btn-primary">提交</button>
                </div>
            </div><!-- /.modal-content -->
        </div><!-- /.modal -->
    </div>
    <!-- 编辑模态框 -->
    <div class="modal fade" id="myModal2" tabindex="-1" role="dialog" aria-labelledby="myModalLabe2" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                    <h4 class="modal-title" id="myModalLabe2">编辑服务器</h4>
                </div>
                <div class="modal-body">
                    <form class="form-horizontal" role="form">
                        <div class="form-group">
                            <label for="serviceName" class="col-sm-2 control-label">服务器名称</label>
                            <div class="col-sm-10">
                                <input type="text" class="form-control" id="serviceName2" placeholder="请输入服务器名称">
                            </div>
                            <input type="hidden" id="serviceId"/>
                        </div>
                        <div class="form-group">
                            <label for="serviceIp" class="col-sm-2 control-label">服务器ip地址（携带http/https）</label>
                            <div class="col-sm-10">
                                <input type="text" class="form-control" id="serviceIp2" placeholder="请输入服务器ip地址">
                            </div>
                        </div>

                        <div class="form-group">
                            <label for="servicePort" class="col-sm-2 control-label">端口号</label>
                            <div class="col-sm-10">
                                <input type="text" class="form-control" id="servicePort2" placeholder="请输入端口号">
                            </div>
                        </div>
                    </form>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                    <button type="button" id="update" class="btn btn-primary">提交</button>
                </div>
            </div><!-- /.modal-content -->
        </div><!-- /.modal -->
    </div>
    <!-- MAIN -->
    <div class="main">
        <!-- MAIN CONTENT -->
        <div class="main-content">
            <div class="container-fluid">
                <!-- OVERVIEW -->
                <div class="panel panel-headline">
                    <form style="margin-left: 3%;margin-top: 2%;" class="form-inline">
                        <div class="form-group">
                            <label for="1">服务器名称&nbsp;&nbsp;</label>
                            <input type="text" class="form-control" id="1" placeholder="服务器名称">
                        </div>
                        <div style="margin-left: 15px;" class="form-group">
                            <label>服务器Ip地址&nbsp;&nbsp;</label>
                            <input type="text" class="form-control" id="2" placeholder="服务器IP">
                        </div>
                        <button style="margin-left: 15px;" type="submit" class="btn btn-primary">搜索</button>
                        <button style="float: right;margin-right: 100px;" type="button" class="btn btn-primary"
                                data-toggle="modal" data-target="#myModal">新增服务器
                        </button>
                        <button id="bjrw" type="button" style="display: none;" class="btn btn-primary"
                                data-toggle="modal" data-target="#myModal2">编辑服务器
                        </button>
                    </form>
                    <table style="margin-top: 2%;" class="table table-hover">
                        <thead>
                        <tr>
                            <th>服务器名称</th>
                            <th>IP地址</th>
                            <th>端口号</th>
                            <th>创建时间</th>
                            <th>操作</th>
                        </tr>
                        </thead>
                        <tbody id="list">
                        </tbody>
                    </table>
                    <div style="height: 50px;"></div>
                </div>

            </div>
        </div>
        <!-- END MAIN CONTENT -->
    </div>
    <!-- END MAIN -->
    <div class="clearfix"></div>
</div>
<link rel="stylesheet" href="https://www.layuicdn.com/layui-v2.5.5/css/layui.css">
<script src="https://www.layuicdn.com/layui-v2.5.5/layui.js"></script>
<script>
    var layer;
    layui.use('layer', function () {
        layer = layui.layer;
    });

    $("#update").click(function () {
        var serviceId = $("#serviceId").val();
        var serviceName = $("#serviceName2").val();
        var serviceIp = $("#serviceIp2").val();
        var servicePort = $("#servicePort2").val();
        if (serviceName == "" || serviceIp == "" || servicePort == "") {
            // layer.show("请完善表单信息");
            layer.open({
                type: 1
                , content: '<div style="padding: 20px 100px;">请完善表单信息</div>'
                , btn: '关闭'
                , btnAlign: 'c' //按钮居中
                , shade: 0 //不显示遮罩
                , yes: function () {
                    layer.closeAll();
                }
            });
        } else {
            $.post(
                "/serviceInfo/update",
                {
                    serviceName: serviceName,
                    serviceIp: serviceIp,
                    servicePort: servicePort,
                    serviceId: serviceId
                },
                function (data) {
                    layer.open({
                        type: 1
                        , content: '<div style="padding: 20px 100px;">更新成功，立即生效</div>'
                        , btn: '收到'
                        , btnAlign: 'c' //按钮居中
                        , shade: 0 //不显示遮罩
                        , yes: function () {
                            layer.closeAll();
                            window.location.href = window.location.href;
                        }
                    });
                }
            );
        }
    });

    $("#list").on('click', ".test", function () {
        var id = $(this).attr("id");
        if (id.indexOf("edit") != -1) {
            $("#bjrw").click();
            var newId = id.slice(4);
            //编辑
            $.get(
                "/serviceInfo/getById",
                {id: newId},
                function (data) {
                    var result = data.result;
                    $("#serviceId").val(result.serviceId);
                    $("#serviceName2").val(result.serviceName);
                    $("#serviceIp2").val(result.serviceIp);
                    $("#servicePort2").val(result.servicePort);
                }
            );
        } else if (id.indexOf("del") != -1) {
            var newId = id.slice(3);
            //删除
            layer.confirm('确认要删除吗？', {
                btn: ['YES', 'NO']//按钮
            }, function (index) {
                layer.close(index);
                $.get(
                    "/serviceInfo/del",
                    {id: newId},
                    function (data) {
                        var code = data.status;
                        window.location.href = window.location.href;
                    }
                );
            });
        }

    })
    $("#add").click(function () {
        var serviceName = $("#serviceName").val();
        var serviceIp = $("#serviceIp").val();
        var servicePort = $("#servicePort").val();
        if (serviceName == "" || serviceIp == "" || servicePort == "") {
            layer.open({
                type: 1
                , content: '<div style="padding: 20px 100px;">请完善表单信息</div>'
                , btn: '关闭'
                , btnAlign: 'c' //按钮居中
                , shade: 0 //不显示遮罩
                , yes: function () {
                    layer.closeAll();
                }
            });
        } else {
            $.post(
                "/serviceInfo/add",
                {
                    serviceName: serviceName,
                    serviceIp: serviceIp,
                    servicePort: servicePort
                },
                function (data) {
                    layer.open({
                        type: 1
                        , content: '<div style="padding: 20px 100px;">新增成功</div>'
                        , btn: '收到'
                        , btnAlign: 'c' //按钮居中
                        , shade: 0 //不显示遮罩
                        , yes: function () {
                            layer.closeAll();
                            window.location.href = window.location.href;
                        }
                    });
                }
            );
        }
    });


    $(function () {
        $.get(
            "/serviceInfo/all",
            function (data) {
                var list = data.result;
                var tempStr = '';
                for (var i = 0; i < list.length; i++) {
                    tempStr += '<tr>\n' +
                        '\t\t\t\t\t\t\t<td>' + list[i].serviceName + '</td>\n' +
                        '\t\t\t\t\t\t\t<td>' + list[i].serviceIp + '</td>\n' +
                        '\t\t\t\t\t\t\t<td>' + list[i].servicePort + '</td>\n' +
                        '\t\t\t\t\t\t\t<td>' + list[i].createTime + '</td>\n' +
                        '\t\t\t\t\t\t\t<td>\n' +
                        '\t\t\t\t\t\t\t\t<button id="edit' + list[i].serviceId + '" class="test btn-xs btn-primary">编辑</button>&nbsp;&nbsp;\n' +
                        '\t\t\t\t\t\t\t\t<button id="del' + list[i].serviceId + '" class="test btn-xs btn-danger">删除</button>\n' +
                        '\t\t\t\t\t\t\t</td>\n' +
                        '\t\t\t\t\t\t</tr>';
                }
                $("#list").html(tempStr);
            }
        );
    });
</script>
</body>
</html>
